*{
	margin: 0;
	padding: 0;
	list-style: none;
}
html,body{
	width: 100%;
	height: 100%;
	background: #272822;
	background-size: cover;	
	overflow: hidden;
}
.body{
	height:100%;
	width: 100%;
	background-repeat: no-repeat;
	background-image: url(img/background.jpg);
	background-size: cover;
}
.star{	
	width: 100%;
	height: 100%;
	overflow: hidden;
}
 .star .shan{
	height: 10px;
	width: 10px;
	background: url(img/1.png) no-repeat;
	background-size: cover;
	position: absolute;
	/*animation: pao  8s linear infinite ;*/
	/*animation:shan 1s linear infinite;*/
	animation-name:shan;
	animation-duration:1s;
	animation-timing-function:ease;
	animation-iteration-count:infinite;
	opacity: 0;
}
 .star .zhuan{
	height: 30px;
	width: 30px;
	background: url(img/xing.png) no-repeat;
	background-size: cover;
	position: absolute;
	/*animation: pao  8s linear infinite ;*/
	animation-name:zhuan;
	animation-duration:2s;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
	opacity: 0;
}
.star .hua{
	height: 5px;
	width: 10px;
	background: url(img/1.png) no-repeat;
	background-size: cover;
	position: absolute;
	/*animation: pao  8s linear infinite ;*/
	animation-name:hua;
	animation-duration:2s;
	animation-timing-function:ease;
	animation-iteration-count:infinite;
	opacity: 0;
}

@keyframes shan{
	0%{transform:scale(0.1,0.1); opacity:0.8 }
	50%{transform:scale(0.6,0.6); opacity:0.9 }
     100%{transform:scale(0.1,0.1); opacity:1 }
}
@keyframes zhuan{
	0%{transform:rotateZ(0deg); opacity:0.5}
	50%{transform:rotateZ(180deg); opacity:1 }
	100%{transform:rotateZ(360deg); opacity:0.7 }
}
@keyframes hua{
	0%{width: 0; height:2px;opacity: 1}
	100%{width: 1000px;height:0px;opacity: 1;transform:rotateZ(45deg)}
	
}
.yun1{
	height: 100%;
	width: 300%;
	background-image: url(img/yun1.png);
	background: cover;
	position: absolute;
	right: 0;
	top: 0;
	opacity: 0.5;
	animation:yun1 50s linear infinite;

}
.yun2{
	height: 100%;
	width: 300%;
	background-image: url(img/yun2.png);
	background: cover;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0.5;
	animation:yun2 100s linear infinite;

}
@keyframes yun1{
    0%{left:0;}
    100%{left:-200%;}
}
@keyframes yun2{
	0%{left:0;}
    100%{left:-200%;}
}





/*星轨*/
.starbox{
	position: absolute;
	width: 400px;
	height: 0px;
	left: 0px;
	top: 0px;
	margin: 80px;
	transform-style: preserve-3d !important;

}
.sun {
    position: absolute;
    width: 157px;
    height: 157px;
    line-height: 157px;
    text-align: center;
    background-image: url(img/sun.png);
    background-size: cover;
    left: 90px;
    top: 50px;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    transition:all 0.2s ease;
}
.sun:hover{
	transform:scale(1.2,1.2);
	opacity: 1;
}
.base{
    /*transform:rotateX(80deg) rotateY(-10deg);*/
    transform-style: preserve-3d !important;
    position: relative;
    width: 360px;
    height: 360px;
    backface-visibility: hidden;
    animation: cir 10s linear 0s infinite;
}
.pan {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(img/c.png);
    background-size: cover;
	animation: cir_p 5s linear 0s infinite;
}
.ball_base {
    transform-origin: 235px 0px;
    transform-style: preserve-3d !important;
    position: absolute;
    top: 180px;
    left: -50px;
    width: 220px;
    height: 127px;
}
.ball{
	transition:all 2s ease-out 0ms;
    transform-origin: 50% 50%;
	position: absolute;
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	background-image: url(img/hover.png);
	background-size: cover;
	left: 0px;
	top: 0px;	
	opacity: 1;
	overflow: hidden;
	cursor: pointer;
}

.ball_1  .ball {
    transform: rotateY(90deg) rotateZ(10deg);
    animation: cir1 10s linear 0s infinite;
	transition-delay: 1000ms !important;
}
.ball_2  .ball {  
    animation: cir2 10s linear 0s infinite;
	transition-delay: 750ms !important;
}
.ball_3  .ball {
    animation: cir3 10s linear 0s infinite;
	transition-delay: 500ms !important;
}
.ball_4  .ball {
    animation: cir4 10s linear 0s infinite;
	transition-delay: 250ms !important;
}
.ball_1{
     transform: rotateX(-90deg) rotateY(0deg) translateY(-75px);
}
.ball_2{
     transform: rotateX(-90deg) rotateY(90deg) translateY(-75px);
}
.ball_3{
     transform: rotateX(-90deg) rotateY(180deg) translateY(-75px);
}
.ball_4{
     transform: rotateX(-90deg) rotateY(270deg) translateY(-75px);
}

@keyframes cir {
  0% {
    transform: rotateX(80deg) rotateY(-10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(80deg) rotateY(-10deg) rotateZ(-360deg);
  }
}
@keyframes cir_p {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}
@keyframes cir1 {
  0% {
    transform: rotateY(0deg) rotateZ(10deg);
  }
  100% {
    transform: rotateY(-360deg) rotateZ(10deg);
  }
}
@keyframes cir2 {
  0% {
    transform: rotateY(-90deg) rotateZ(10deg);
  }
  100% {
    transform: rotateY(-450deg) rotateZ(10deg);
  }
}
@keyframes cir3 {
  0% {
    transform: rotateY(-180deg) rotateZ(10deg);
  }
  100% {
    transform: rotateY(-540deg) rotateZ(10deg);
  }
}
@keyframes cir4 {
  0% {
    transform: rotateY(-270deg) rotateZ(10deg);
  }
  100% {
    transform: rotateY(-630deg) rotateZ(10deg);
  }
}
.base .ball span{
	text-align: center;
	border-radius: 5px;
	color: #414141;
	background: white;
	padding: 5px;
	font-size: 14px;
	font-weight: 700;
}

/*��Ϸ*/
.boxchangjing{
	width: 750px;
	height: 600px;
	background-image: url(box.png);
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	right:50px;
	top: 0px;
}
.game{
	    width:400px;
		height: 400px;
		background-image: url(game.png);
		background-size: cover;
		position:absolute;
		left: 163px;
		top:35px;

}
.box{
		width:320px;
		height: 320px;
		background: url(bg.jpg) -150px -80px;
		box-shadow: 0 0 8px #1E2126;
		position: absolute;
		right: 227px;
		top: 75px;
		opacity: 0.6;

	}
.lmen{
	position: absolute;
	left: 0;
	top: 0;
	width: 160px;
	height: 310px;
	background: url(left.jpg);
	background-size: 100% 100%;
	z-index: 10;
	transition:all 1s ease;
	opacity: 0.9;
	box-shadow:0px 5px 0px 5px  #000; 
}
.rmen{
	position: absolute;
	right: 0;
	top: 0;
	width: 160px;
	height: 310px;
	background: url(right.jpg);
	background-size: 100% 100%;
	transition:all 1s ease;
	z-index: 10;
	opacity: 0.9;
	box-shadow:0px 5px 0px 5px  #000; 
}

	.bgbox{
		width: 320px;
		height: 320px;
	    position: absolute;
		right: 227px;
		top: 75px;
         z-index: 9;
         overflow: hidden;
    }
    .bgbox .topmen{
    	width: 320px;
		height: 50px;
		padding-top: 150px;
		background:rgba(255,255,255,0.5);
		position: absolute;
		left: 0px;
		top: -200px;
		font-size:40px; 
		color: rgba(255,57,57,0.7);
		text-align: center;
		text-shadow:2px 1px 2px #000; 

    }
    .bgbox .botmen{
    	width: 320px;
		height: 50px;
		padding-bottom: 150px;
		background:rgba(255,255,255,0.5);
		position: absolute;
		left: 0px;
		bottom: -200px;
		font-size:30px; 
		color: rgba(0,0,0,0.5);
		text-align: center; 
		text-shadow:1px 1px 1px #9B9B90; 
    }
    
	.bgbox .one{
		width: 200px;
		height: 200px;
		position:absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin:auto;
		background: url(one.png);
		opacity: 0;
		animation:one 1s linear 2s;
	}
	@keyframes one{
		0%{opacity: 1}
		99%{opacity: 1}
		100%{opacity:0;}
	}
	.bgbox .two{
		width: 200px;
		height: 200px;
		position:absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin:auto;
		background: url(two.png);
		opacity: 0;
		animation:two 1s linear 1s;
	}
	@keyframes two{
		0%{opacity: 1}
		99%{opacity: 1}
		100%{opacity:0;}
	}
	.bgbox .go{
		width: 200px;
		height: 200px;
		position:absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin:auto;
		background: url(go.png);
        opacity: 0;
		animation:go 1s linear 3s;
	}
	@keyframes go{
		0%{opacity: 1}
		99%{opacity: 1}
		100%{opacity:0;}
	}

	.square{
		width: 15px;
		height: 15px;
		background-color:rgba(0,0,0,0.6);
		float: left;
		overflow: hidden;
		border-bottom: 1px solid;
		border-right: 1px solid;
		position: relative;
	}
	/*.square.tranY{
		animation:tranY 0.2s linear;
		
	}
	@keyframes tranY{
		0%{transform:translateY(0px);}
		100%{transform:translateY(10px);}
	}
	.square.tran-Y{
		animation:tran-Y 0.2s linear;
		
	}
	@keyframes tran-Y{
		0%{transform:translateY(0px);}
		100%{transform:translateY(-10px);}
	}
	.square.tranX{
		animation:tranX 0.2s linear;
		
	}
	@keyframes tranX{
		0%{transform:translateX(0px);}
		100%{transform:translateX(10px);}
	}
	.square.tran-X{
		animation:tran-X 0.2s linear;		
	}
	@keyframes tran-X{
		0%{transform:translateX(0px);}
		100%{transform:translateX(-10px);}
	}*/
	/*.square.tranX{
		transform:translateX(10px);
	}
	.square.tran-X{
        transform:translateX(-10px);
	}*/
 	.tou{
    	background-image: url(tou.jpg);
    	background-size: cover;
    }
    .shen{
    	background-image: url(shen.jpg);
    	background-size: cover;
    }
    .food{
    	background-image: url(foot.jpg);
    	background-size: cover;
    }
